<template>
  <view class="app-warp">
    <uni-nav-bar @clickLeft="handleLeft" statusBar :border="false" v-bind="attrs" />
    <slot name="head"></slot>
    <view class="app-container">
      <slot />
    </view>
    <!-- 底部按钮悬浮固定在底部 -->
    <slot class="footer-box" name="footer">
      <view class="footer-container shadow" v-if="!!props.bottomBtnProps?.isBtn">
        <md-button @click="bottomBtnClick" :loading="!!props?.bottomBtnProps?.loading">
          {{ props?.bottomBtnProps?.btnText }}
        </md-button>
      </view>
    </slot>
    <!-- 用于弹窗，防止弹窗级别过低 -->
    <slot name="dialog" />
  </view>
</template>
<script setup lang="ts">
import { useAttrs } from 'vue';
const attrs = useAttrs(); // 透传过来的属性及方法

interface BottomBtnIProps {
  isBtn: boolean;
  loading: boolean;
  btnText: string;
}

export interface PropsType {
  bottomBtnProps?: Partial<BottomBtnIProps>;
}

// 接收props
let props = withDefaults(defineProps<PropsType>(), {
  bottomBtnProps: () => ({
    isBtn: false,
    loading: false,
    btnText: '',
  }),
});

const emit = defineEmits<{
  (e: 'bottomBtnClick'): void;
}>();

// 返回【click】
let handleLeft = () => {
  if (!attrs?.leftIcon || !attrs?.leftText) return;
  //获取路由
  let routes = getCurrentPages();
  // 说明不是刷新，分享等单个路由。
  if (routes && routes.length > 1) return uni.navigateBack();
  uni.reLaunch({
    url: '/pages/index/index',
  });
};

// 按钮点击事件
const bottomBtnClick = () => {
  emit('bottomBtnClick');
};
</script>
<style lang="scss" scoped>
.footer-box {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.footer-container {
  background: $white;
  padding: 16rpx 30rpx;
}
</style>
